import { useEffect } from 'react';
import { Button, Result, Modal } from 'antd';
import { AxInputForSimple } from '../AxInput';
const QRCode = require('qrcode.react');

/**
 * 扫码支付
 * @param title 标题
 * @param money 支付金额
 * @param status 支付状态（pending - 等待支付，success - 支付成功，error - 支付失败）
 * @param value 值（用于生成二维码）
 * @param handleVisible 展示或关闭弹框
 * @param handleFinality 支付完成处理函数
 */
export const ScanCodeModal = props => {
  const {
    visible,
    title = '扫码支付',
    status = 'pending',
    money = 0,
    value = '0',
    handleVisible,
    handleFinality,
    ...rest
  } = props;

  return (
    <Modal
      visible={visible}
      title={title}
      footer={null}
      maskClosable={false}
      onCancel={() => handleVisible && handleVisible()}
      {...rest}
    >
      {status === 'pending' && (
        <>
          <h2 style={{ textAlign: 'center' }}>{money}元</h2>
          <QRCode style={{ margin: 'auto' }} value={value} size={450} />
        </>
      )}
      {status === 'success' && (
        <>
          <Result
            status="success"
            title="支付成功"
            subTitle={title}
            extra={[
              <Button type="primary" key="ok" onClick={handleFinality}>
                确定
              </Button>,
            ]}
          />
        </>
      )}
      {status === 'error' && (
        <>
          <Result
            status="error"
            title="支付失败"
            subTitle={title}
            extra={[
              <Button type="primary" key="ok" onClick={handleFinality}>
                确定
              </Button>,
            ]}
          />
        </>
      )}
    </Modal>
  );
};

/**
 * 付款码支付
 * @param handleVisible 展示或关闭弹框
 * @param handleCreate 提交扫描数据处理函数
 * @param handleFinality 支付完成处理函数
 */
export const PayCodeModal = props => {
  const {
    visible,
    title = '付款码支付',
    status = 'pending',
    money = 0,
    handleVisible,
    handleCreate,
    handleFinality,
    ...rest
  } = props;

  // useEffect(() => {
  //     let start = new Date();
  //     let code = "";
  //     document.onkeypress = (e) => {
  //         const d = document.getElementById('payCodeId');
  //         const v = d && d.value;
  //         const c = v && v.trim();
  //         c && c.length === 18 && handleCreate && handleCreate(c);
  //         // const now = new Date();
  //         // if (now - start > 50) {
  //         //     start = now;
  //         //     code = String.fromCharCode(e.keyCode);
  //         //     console.log(code);
  //         // } else {
  //         //     code += String.fromCharCode(e.keyCode);
  //         //     console.log(code);
  //         // }
  //     }
  // }, []);
  const handlePressEnter = e => {
    const c = e.target.value.trim();
    c.length === 18 && handleCreate && handleCreate(c);
  };

  return (
    <Modal
      visible={visible}
      title={title}
      footer={null}
      maskClosable={false}
      onCancel={() => handleVisible && handleVisible()}
      {...rest}
    >
      {status === 'pending' && (
        <>
          <h2 style={{ textAlign: 'center' }}>{money}元</h2>
          <div
            style={{
              margin: 'auto',
              fontSize: 25,
              color: 'red',
              textAlign: 'center',
            }}
          >
            <AxInputForSimple
              autoFocus
              label="付款码"
              id="payCodeId"
              onPressEnter={handlePressEnter}
              style={{ width: '60%' }}
            />
            {/* <input style={{ color: 'black' }} id='payCodeId' type='text' autofocus="autofocus" /> */}
            <div>请扫描付款码...</div>
          </div>
        </>
      )}
      {status === 'success' && (
        <>
          <Result
            status="success"
            title="支付成功"
            subTitle={title}
            extra={[
              <Button type="primary" key="ok" onClick={handleFinality}>
                确定
              </Button>,
            ]}
          />
        </>
      )}
      {status === 'error' && (
        <>
          <Result
            status="error"
            title="支付失败"
            subTitle={title}
            extra={[
              <Button type="primary" key="ok" onClick={handleFinality}>
                确定
              </Button>,
            ]}
          />
        </>
      )}
    </Modal>
    // <div
    //     style={{
    //         display: 'flex',
    //         position: 'fixed',
    //         top: 0,
    //         right: 0,
    //         bottom: 0,
    //         left: 0,
    //         zIndex: 9999999999999999,
    //         backgroundColor: 'rgba(0, 0, 0, 0.45)',
    //     }}
    // >
    //     <div
    //         style={{
    //             margin: 'auto',
    //             fontSize: 25,
    //             color: 'white',
    //             textAlign: 'center',
    //         }}>
    //         <input style={{ color: 'black' }} id='payCodeId' type='text' autofocus="autofocus" />
    //         <div>
    //             请扫描付款码...
    //         </div>
    //         <div>
    //             <a style={{ color: 'red' }} onClick={() => handleVisible && handleVisible()}>（取消）</a>
    //         </div>
    //     </div>
    // </div>
  );
};
